<template>
  <div>
    <div class="action-header">
      <div class="el-row--flex">
        <el-button type="primary" @click="createItem">Add</el-button>
        <el-input v-model="queryString" placeholder="exact match query filename" clearable @keydown.enter="getList"></el-input>
        <el-button type="success" @click="getList">Query</el-button>
        <el-button type="danger"  @click="deleteDB">DeleteDB</el-button>
        <el-button @click="updateItem">Update Item</el-button>

        <el-button v-if="!intv" @click="randomUpdate">Random Update</el-button>
        <el-button v-else type="warning" @click="cancelRandomUpdate">Cancel Update</el-button>
      </div>

      <div class="el-row--flex">
        <el-input v-model="tableName" placeholder="Table Name" clearable @keydown.enter="setTable"></el-input>
        <el-button type="info" @click="setTable">Set Table</el-button>
        <el-button disabled>totalCount: {{ totalCount }}</el-button>
      </div>
    </div>

    <el-table
        :data="transferList"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="id"
          width="80">
      </el-table-column>
      <el-table-column
          prop="filename"
          label="filename"
          width="180">
      </el-table-column>
      <el-table-column
          prop="url"
          label="url">
      </el-table-column>
      <el-table-column
          prop="progress"
          label="progress">
      </el-table-column>
      <el-table-column
          prop="directoryPath"
          label="directoryPath">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import faker from 'faker'
import {
  windowDispatchEvent,
  windowOnEvent,
  windowOffEvent
} from '@/utils/events'
import {
  EVENT_TRANSFER_QUERY,
  EVENT_TRANSFER_ADD,
  EVENT_TRANSFER_UPDATED,
  EVENT_TRANSFER_DELETE_DB,
  EVENT_TRANSFER_UPDATE_ITEM
} from '@/database/enum'
import {TransferItem} from "../database/enum"

export default {
  name: "DbTable",
  data() {
    return {
      dialogFormVisible: false,
      transferList: [],
      totalCount: 0,
      queryString: '',
      intv: null,
      tableName: 'transferTable'
    }
  },
  mounted() {
    this.getList()
    windowOnEvent(EVENT_TRANSFER_UPDATED, this.getList)
  },
  beforeUnmount() {
    windowOffEvent(EVENT_TRANSFER_UPDATED, this.getList)
  },
  methods: {
    async getList() {
      const params = {
        isReverse: true
      }

      if (this.queryString) {
        params.where = {
          filename: this.queryString
        }
      }

      const result = await windowDispatchEvent(EVENT_TRANSFER_QUERY, params)
      const {list: transferList = [], totalCount} = result

      this.transferList = transferList
      this.totalCount = totalCount
    },
    async createItem() {
      const item = new TransferItem({
        filename: faker.system.fileName(),
        url: faker.internet.url(),
        progress: faker.random.number(),
        directoryPath: faker.system.directoryPath(),
      })

      console.log(item)

      await windowDispatchEvent(EVENT_TRANSFER_ADD, {
        item
      })
    },
    async deleteDB() {
      const result = await windowDispatchEvent(EVENT_TRANSFER_DELETE_DB)
      console.log(result)
      this.getList()
    },
    async updateItem() {
      const randIndex = Math.round(Math.random() * (this.transferList.length - 1))
      const item = this.transferList[randIndex]
      await windowDispatchEvent(EVENT_TRANSFER_UPDATE_ITEM, {
        item: item,
        update: {
          progress: faker.random.number()
        }
      })
    },
    randomUpdate() {
      this.cancelRandomUpdate()
      this.intv = setInterval(() => {
        this.updateItem()
        this.updateItem()
        this.updateItem()
      }, 1000)
    },
    cancelRandomUpdate() {
      clearInterval(this.intv)
      this.intv = null
    },
    setTable() {
      console.log(this.tableName)
    }
  }
}
</script>

<style scoped>
.action-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.progress-column {
  font-size: 18px;
}
</style>
